<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{title[0]}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{title[1]}}</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>{{title[1]}}</h3>

      </el-header>
      <el-container>

        <el-main>
          <el-container>

            <div>
              <el-form :inline="true"
                       :model="formInline"
                       class="user-search">

                <el-form-item label="用户名称：">
                  <el-input size="large"
                            v-model="formInline.userName"
                            placeholder="请输入"
                            clearable></el-input>
                </el-form-item>
                <el-form-item label="角色名称：">
                  <el-select v-model="formInline.roleName"
                             placeholder="请选择角色"
                             clearable>
                    <el-option v-for="role in allRoles"
                               :value="role.role_name"
                               :key="role.role_name"
                               clearable></el-option>
                  </el-select>

                </el-form-item>

                <el-form-item>
                  <el-button size="large"
                             type="primary"
                             icon="el-icon-search"
                             @click="search">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="mod-btnbox">
              <el-button size="small"
                         type="primary"
                         icon="el-icon-plus"
                         @click="upRolePower">权限管理</el-button>

              <el-button size="small"
                         type="primary"
                         icon="el-icon-plus"
                         @click="addUserr()">新增用户</el-button>

            </div>

            <el-main>
              <template>
                <el-table ref="multipleTable"
                          :data="tableData"
                          tooltip-effect="dark"
                          style="width: 100%"
                          @selection-change="handleSelectionChange"
                          height="450">
                  <el-table-column type="selection"
                                   width="55">
                  </el-table-column>
                  <el-table-column align="center"
                                   sortable
                                   prop="user_id"
                                   label="用户id"
                                   width="120">
                  </el-table-column>
                  <el-table-column prop="user_name"
                                   label="用户姓名"
                                   align="center"
                                   width="120">
                  </el-table-column>
                  <el-table-column prop="user_password"
                                   label="用户密码"
                                   align="center"
                                   width="180">
                  </el-table-column>

                  <el-table-column prop="role_name"
                                   label="用户所属角色"
                                   align="center"
                                   show-overflow-tooltip
                                   width="160">
                  </el-table-column>

                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="mini"
                                 plain
                                 @click="findPower(scope.$index, scope.row)">查看用户所有权限</el-button>
                      <el-button size="mini"
                                 plain
                                 @click="handleEdit(scope.$index, scope.row)">修改用户信息</el-button>
                      <el-button size="mini"
                                 type="danger"
                                 plain
                                 @click="delUser(scope.$index, scope.row)">删除用户</el-button>

                    </template>
                  </el-table-column>
                </el-table>

              </template>
            </el-main>
            <el-footer>

              <Pagination v-bind:child-msg="pageparm"
                          @callFather="callFather"></Pagination>
            </el-footer>
          </el-container>
        </el-main>
      </el-container>

    </el-container>
    <el-dialog title="新增用户"
               :visible.sync="addUserShow"
               width="40%"
               @click='closeDialog("addUser")'>
      <el-form label-width="160px"
               :model="addUserForm"
               ref="addUserForm">
        <el-form-item label="用户名">
          <el-input size="small"
                    v-model="addUserForm.username"
                    placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input size="small"
                    v-model="addUserForm.password"
                    auto-complete="off"
                    placeholder="请输入用户密码"></el-input>
        </el-form-item>
        <el-form-item label="用户所属角色">
          <el-select v-model="addUserForm.role"
                     placeholder="请选择角色"
                     clearable>
            <el-option v-for="role in allRoles"
                       :value="role.role_name"
                       :key="role.role_name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户所属班级(没有可以不选)">
          <el-select v-model="addUserForm.classs"
                     placeholder="请选择班级"
                     clearable>
            <el-option v-for="classs in allClasss"
                       :value="classs.class_name"
                       :key="classs.class_name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button size="small"
                   @click='closeDialog("addUser")'>取消</el-button>
        <el-button size="small"
                   type="primary"
                   :loading="loading"
                   class="title"
                   @click="submitFormAddUser()">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="用户权限"
               :visible.sync="powerShow"
               width="40%"
               @click='closeDialog("powerShow")'>
      <el-tree :data="treeData"
               :props="defaultProps"></el-tree>
    </el-dialog>
  </div>

</template>

<script>
// 导入组件
// import headerComponent from "./head.vue";
//导入方法

//分页组件
import Pagination from '../../components/Pagination'
import { userList, addUser } from '../../api/userMG'
import { findRole } from '../../api/roleMG'
import { findAllC } from '../../api/class'
import { findP } from '../../api/permMG'
// 导出模块
export default {
  // 模块名字
  name: 'rolePower',
  // 模块数据
  data() {
    //数据
    return {
      allRoles: [],
      allClasss: [],
      filterText: '',
      treeData: [],
      tableData: [],
      multipleSelection: [],
      title: '',
      formVisible: '',
      addUserShow: false,
      powerShow: false,

      formInline: {
        page: 1,
        limit: 10,
        userName: '',
        roleName: '',
      },
      addUserForm: {
        username: '',
        password: '',
        role: '',
        classs: '',
        token: localStorage.getItem('logintoken'),
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
        ],
        role: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
      },
      defaultProps: {
        children: 'perms',
        label: 'name',
      },
    }
  },
  // 注册组件
  components: {
    // headerComponent
    Pagination,
  },
  // 监听指定值，只有指定值变化，才会触发

  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    submitFormAddUser() {
      addUser(this.addUserForm).then((res) => {
        if (res.data.code == 200) {
          alert('添加成功')
          this.addUserShow = false
          this.getdata(this.formInline)
        }
      })
    },

    closeDialog(dialog) {
      if (dialog == 'addUser') {
        this.addUserShow = false
        ;(this.addUserForm.username = ''),
          (this.addUserForm.password = ''),
          (this.addUserForm.role = ''),
          (this.addUserForm.classs = '')
      } else if (dialog == 'powerShow') {
        this.powerShow = false
      }
    },

    upRolePower() {},
    findPower(index, row) {
      findP(row.role_name).then((res) => {
        this.treeData = res.data
        console.log(this.treeData)
        this.powerShow = true
      })
    },
    delUser(index, row) {},

    filterNode(value, data) {
      if (!value) return true
      return data.subject.indexOf(value) !== -1
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    addFun() {},
    submitFun() {},

    addUserr() {
      this.addUserShow = true
    },

    getdata(parameter) {
      ;(this.loading = true),
        /***
         * 调用接口，渲染题目列表
         */
        userList(parameter)
          .then((res) => {
            this.loading = false
            if (res.data.code != 200) {
              this.$message({
                type: 'info',
                message: res.msg,
              })
            } else {
              this.tableData = res.data.data.list

              this.pageparm.currentPage = this.formInline.page
              this.pageparm.pageSize = this.formInline.limit
              this.pageparm.total = res.data.data.total
            }
          })
          .catch((err) => {
            this.loading = false
            this.$message.error('获取题目列表失败，请稍后再试！')
          })
    },
    //列表操作
    handleEdit(index, row) {
      alert('修改')
    },

    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {
    findRole().then((res) => {
      this.allRoles = res.data
    })
    findAllC().then((res) => {
      this.allClasss = res.data
    })
    ;(this.title = this.$route.name.split('/')), this.getdata(this.formInline)
  },
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
}
</script>

// scoped 样式只在本组件使用
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.user-search {
  margin-top: 20px;
}
</style>
